<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../../src/css/bootstrap.css" />
		<link rel="stylesheet" href="../../css/my_style.css" />
		<link rel="stylesheet" href="index.css" />
		<script src="../../../src/vue.min.js"></script>
		<script src="../../../src/jquery.js"></script>
		<script src="../../js/comm.js"></script>
	</head>

	<body>
		<div id="app">
			{{time}}
			<div style="width: 400px;height: 200px;border: 1px solid black;">
				<picker v-model="time"></picker>
			</div>
			
		</div>
		<script type="text/x-tempalte" id="picker">
			<div class="calendar">
				<input type="input" class="form-control" readonly="readonly" v-bind:value="select_day">
				<div>
					<div class="month">
						<ul>
							<li class="arrow cursor" @click="pickPre(currentYear,currentMonth)">❮</li>
							<li class="year-month" @click="pickYear(currentYear,currentMonth)">
								<span class="choose-year">{{ currentYear }}</span>
								<span class="choose-month">{{ currentMonth }}月</span>
							</li>
							<li class="arrow cursor" @click="pickNext(currentYear,currentMonth)">❯</li>
						</ul>
					</div>
					<ul class="weekdays">
						<li>一</li>
						<li>二</li>
						<li>三</li>
						<li>四</li>
						<li>五</li>
						<li class="weekend">六</li>
						<li class="weekend">日</li>
					</ul>
					<ul class="days">
						<li @click="pick(day,$event)" v-for="day in days">
							<span>				   
								<span v-bind:class="[
									{'active':(day.getFullYear() == currentYear && (day.getMonth()+1) == currentMonth && day.getDate() == currentDay)},									
									{'today':(day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate())},
									{'other-month':(day.getMonth()+1) != currentMonth}]">{{ day.getDate() }}</span>
							</span>
						</li>
					</ul>
				</div>				
			</div>
		</script>
		<script type="text/javascript">
			Vue.component('picker', {
				template:'#picker',
				data: function(){
					return {
						currentDay: 1,
						currentMonth: 1,
						currentYear: 1970,
						currentWeek: 1,
						days: [],
						select_time:this.value,
						select_day:''
					}
				},
				props: ['value'],
				created: function() {
					if(this.value){
						this.select_day = this.formatDay(this.value)
					}
					this.initData(Number(this.value) || null);
					
					
					var test = new Date('2017/2/1')
					test.setDate(0)
					console.log(test.getDate())
					
					
				},
				methods: {
					initData: function(cur) {
						var date;
						if(cur) {
							date = new Date(cur);
						} else {
							date = new Date();
						}
						this.currentDay = date.getDate();
						this.currentYear = date.getFullYear();
						this.currentMonth = date.getMonth() + 1;
						this.currentWeek = date.getDay(); // 1...6,0
						if(this.currentWeek == 0) {
							this.currentWeek = 7;
						}
						var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
						console.log("today:" + str + "," + this.currentWeek);
						
						var current_month = new Date(this.currentYear+'/'+this.currentMonth+'/'+this.currentDay)
						current_month.setDate(0)
						var days = current_month.getDate()
						console.log(days)
						this.days.length = 0;
						// 今天是周日，放在第一行第7个位置，前面6个
						for(var i=0;i<35;i++){
							
						}
//						for(var i = this.currentWeek - 1; i >= 0; i--) {
//							var d = new Date(str);
//							d.setDate(d.getDate() - i);
//							console.log("y:" + d.getDate());
//							this.days.push(d);
//						}
//						for(var i = 1; i <= 35 - this.currentWeek; i++) {
//							var d = new Date(str);
//							d.setDate(d.getDate() + i);
//							this.days.push(d);
//						}
					},
					pick: function(date,ev) {						
						this.select_day = this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
						// 通过 input 事件发出数值
						console.log(date.getTime())
						
      					this.$emit('input', date.getTime())
      					this.initData(date.getTime());
      					return;
      					console.log(this.currentDay)
      					this.currentDay = date.getDate();
						this.currentYear = date.getFullYear();
						this.currentMonth = date.getMonth() + 1;
//						alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()));
					},
					pickPre: function(year, month) {
						// setDate(0); 上月最后一天
						// setDate(-1); 上月倒数第二天
						// setDate(dx) 参数dx为 上月最后一天的前后dx天
						var d = new Date(this.formatDate(year, month, 1));
						d.setDate(0);
						this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
					},
					pickNext: function(year, month) {
						var d = new Date(this.formatDate(year, month, 1));
						d.setDate(35);
						this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
					},
					pickYear: function(year, month) {
						alert(year + "," + month);
					},

					// 返回 类似 2016-01-02 格式的字符串
					formatDate: function(year, month, day) {
						var y = year;
						var m = month;
						if(m < 10) m = "0" + m;
						var d = day;
						if(d < 10) d = "0" + d;
						return y + "-" + m + "-" + d
					},
					formatDay:function(time){
						var date = new Date(Number(time))						
						var year = date.getFullYear()
						var month = date.getMonth()+1
						var day = date.getDate()
						return this.formatDate(year,month,day)
					}
				},
			});
			
			new Vue({
				el: '#app',
				data: {
					time:'1501660587000',
				},
				computed: {
					total: function() {
						return	this.price * 100 ;
					}
				},
				mounted:function(){
					
				}
			})
		</script>
	</body>

</html>